<template>
  <div class="page-actions">
    <template v-for="action in actions">
      <form-action v-if="action.type === 'form'"
                   :action="action"
                   :extra-params="extraParams"
                   @change="handleActionChange"/>
    </template>
  </div>
</template>

<script setup>
import {allowed} from "../profile.js";

const {config, extraParams} = defineProps(['config', 'extraParams']);
const emit = defineEmits(['change']);

const actions = computed(() => {
  return (config.actions ?? []).filter(action => {
    return allowed(action.permission);
  });
});

const handleActionChange = () => {
  emit('change');
}
</script>

<style lang="scss" scoped>

</style>
